<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
</head>
<body>

<div id="app">
    <teacher></teacher>
    <teacher></teacher>
    <teacher></teacher>
</div>

<script>
    // 1.创建组件
    const student = {
        template: `
            <div>
                <h1>学生信息</h1>
                <p>姓名:张三</p>
                <p>年龄:20</p>
                <p>班级:python2512</p>
            </div>
        `,
        created() {
            console.log('student 组件对象被创建')
        }
    }
    const teacher = {
        template: `
          <div>
            <h1>教师信息</h1>
            <p>姓名:李四</p>
            <p>年龄:20</p>
            <p>薪资:3000</p>
            <hr>
            <student></student>
          </div>
        `,
        components: {
            student: student
        },
        created() {
            console.log('teacher 组件对象被创建')
        }
    }


    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components: {
            student, teacher   //局部注册    组件名:组件对象
        }
    })
</script>
</body>
</html>
